<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<head>
<title>MKZ SystemBar</title>
</head>

<body>
	<rich:panel header="RichBar">
		Bar Marco Zero de Bauru 
	</rich:panel>
	<h:form>
    <!--  launch wizard button -->
    <rich:panel header="Seja Bem Vindo!">
        <a4j:commandButton value="Nova Ordem de Servi&ccedil;o"
            oncomplete="#{rich:component('wizard')}.show()" />
    </rich:panel>
    <rich:editor rendered="false" />
</h:form>

<!--  modal panel where the wizard is running -->
<rich:modalPanel id="wizard" width="550" height="300">
    <f:facet name="header">Ordem de Servi&ccedil;o</f:facet>
    <f:facet name="controls">
        <a href="#" onclick="#{rich:component('wizard')}.hide()">X</a>
    </f:facet>

    <h:panelGroup id="wizardInclude">
        <a4j:include viewId="#{wizardBean.startPage}" />
    </h:panelGroup>

</rich:modalPanel>

<!--  order table -->
<a4j:outputPanel id="orders">
    <rich:dataTable value="#{barBean.ordens}" var="order"
         rowKeyVar="row">
        <rich:column>
            <f:facet name="header">Order #</f:facet>
            <h:outputText value="#{row+1}" />
        </rich:column>
        <rich:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{order.name}" />
        </rich:column>
        <rich:column>
            <f:facet name="header">Email</f:facet>
            <h:outputText value="#{order.email}" />
        </rich:column>
        <rich:column>
            <f:facet name="header">Drink</f:facet>
            <h:outputText value="#{order.drink}" />
        </rich:column>
        <rich:column>
            <f:facet name="header">Comments</f:facet>
            <h:outputText value="#{order.comments}" escape="false" />
        </rich:column>
    </rich:dataTable>
</a4j:outputPanel>
</body>
</html>

